<template>
  <div>
    <div class="aui-bg-f aui-margin-b-15 user_info">
        <ul class="aui-padded-15 aui-list aui-list-in aui-ftn14">
            <li class="aui-list-item aui-border-b">
                <van-row>
                    <van-col span="6" class="aui-ftn14 aui-text-3">手机号</van-col>
                    <van-col span="18" class="aui-list-item-right aui-text-9 aui-text-right" v-text="user.mobile"></van-col>
                </van-row>
            </li>
            <li class="aui-list-item aui-border-b">
                <van-row>
                    <van-col span="6" class="aui-ftn14 aui-text-3">QQ</van-col>
                    <van-col span="18" class="aui-text-right">
                        <input type="number" name="qq" v-model="user.qq" placeholder="填写QQ号" class="aui-text-right input">
                    </van-col>
                </van-row>
            </li>
            <li class="aui-list-item aui-border-b">
                <van-row>
                    <van-col span="6" class="aui-ftn14 aui-text-3">昵称</van-col>
                    <van-col span="18" class="aui-text-right">
                        <input type="text" name="nick" v-model="user.nickname" class="aui-text-right input">
                    </van-col>
                </van-row>
            </li>
            <li class="aui-list-item aui-border-b">
                <van-row>
                    <van-col span="6" class="aui-ftn14 aui-text-3">生日</van-col>
                    <van-col span="18" v-text="user.birthday"  @click="is_show_birthday = true" id="birthday" class="aui-text-right aui-ftn14">
                    </van-col>
                </van-row>
            </li>
            <li class="aui-list-item aui-border-b">
                <van-row>
                    <van-col span="6" class="aui-ftn14 aui-text-3">所在地</van-col>
                    <van-col span="18" class="aui-text-right aui-ftn14 aui-text-6" v-text="select_city" @click="is_show_address = true"></van-col>
                </van-row>
            </li>
            <li class="aui-list-item aui-border-b">
                <van-row>
                    <van-col span="6" class="aui-ftn14 aui-text-3">性别</van-col>
                    <van-col span="18" class="aui-text-right aui-ftn14">
                        <van-radio-group v-model="user.gender" direction="horizontal" class="input gender" @change="fnSelectGender">
                          <van-radio name="1">男</van-radio>
                          <van-radio name="2">女</van-radio>
                        </van-radio-group>
                    </van-col>
                </van-row>
            </li>
            <div class="aui-padded-t-15 aui-margin-t-15 aui-margin-b-15">
                <div class="aui-text-f aui-ftn16 aui-text-center submit_btn aui-bg-red" @click="fnConfirm">确认修改</div>
            </div>
            <div class="aui-ftn12 aui-text-center aui-text-9 aui-padded-b-15">请确定您的信息填写正确！</div>
        </ul>


        <!-- 地址 -->
        <van-popup v-model="is_show_address" position="bottom">
          <van-area title="所在地" :area-list="citys" item-height="60" @confirm="fnSelectCity" @cancel="is_show_address = false" />
        </van-popup>
        <!-- 生日 -->
        <van-popup v-model="is_show_birthday" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择出生日期"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="fnOpenSelector"
            @cancel="is_show_birthday = false"
            item-height="60"
          />
        </van-popup>
    </div>
  </div>
</template>

<script>
  import province_list from '@/service/city.js'
  import User from '../../service/user.js'
  export default {
    data () {
      return {
        user: {
          birthday: '',
          gender: '1'
        },
        select_city: '请选择地址',
        is_show_address: false,
        citys: {} ,//地址大全,
        is_show_birthday: false,
        minDate: new Date(1920, 0, 1),
        maxDate: new Date(),
        currentDate: new Date(),
      }
    },
    mounted() {
      this.user.birthday = this.fnFormatDate(this.currentDate);
      this.citys = province_list;
      this.init()
    },
      methods: {
        init: function() {
          User.fnGetUserData({uid: this.$store.state.uid, isToken: true}).then(res => {
            if (res && res.status) {
                this.user = res.data;
                this.user.gender = this.user.gender.toString();
                if (!this.user.birthday)  this.user.birthday = this.fnFormatDate(this.currentDate)
                if (this.user.province) this.select_city = this.user.province + this.user.city + this.user.area;
            }
          })
        },
        fnSelectGender: function(val) {
        },
        // 请选择收货地址
        fnSelectCity: function(val) {
          var city = ''
          this.user.province = val[0].name;
          this.user.city = val[1].name;
          this.user.area = val[2].name
          val.forEach((item)=>{
              city += item.name
          })
          this.select_city = city;
          this.is_show_address = false;
        },
        fnFormatDate: function(date) {
          const Y = date.getFullYear() + '/';
          const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
          const D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
          return Y+M+D;
        },
        fnOpenSelector: function(val){
            const date = new Date(val);
            this.is_show_birthday = false;
            this.user.birthday = this.fnFormatDate(date);
        },
        fnConfirm: function() {
            var qqFormat = /^[0-9]*$/;
            if (!this.user.nickname) {
                this.utils.fnMsg('昵称不能为空');
                return false;
            } else if (!this.user.qq) {
                this.utils.fnMsg('qq不能为空');
                return false;
            }else if (!qqFormat.test(this.user.qq)) {
                this.utils.fnMsg('qq为数值！');
                return false;
            } else if (!this.user.birthday) {
                this.utils.fnMsg('生日不能为空');
                return false;
            } else if (!this.select_city) {
                this.utils.fnMsg('所在地不能为空');
                return false;
            } else {
                this.user.uid = this.$store.state.uid;
                this.user.isToken = true;
                User.fnGetEditUser(this.user).then(res => {
                  if (res) {
                      this.utils.fnMsg(res.msg);
                      if (res.status) {
                        var vm = this;
                        setTimeout(function() {
                          vm.back()
                        }, 2000)
                      }
                  }
                })
            }
        }
      }
    }

</script>

<style lang="scss">
    div.user_info {
      li {
        height: 50px;
        line-height: 50px;
        .input {
          border: 0;
          height: 50px;
          line-height: 50px;
          background-color: transparent!important;
        }
        .gender {
          -webkit-justify-content: flex-end;
              -ms-flex-pack: end;
                  justify-content: flex-end;
        }
      }
      div.submit_btn {
        height: 50px;
        line-height: 50px;
      }
    }
</style>
